<template>
  <view class="ct-a">
    <view v-for="(item, index) in icoList" :key="index" @click="chgtmp(index)">
      <view :class="['ct-b'+index]"><i :class="['iconfont', item.cls, 'icon-fs']"></i></view>
      <view :class="['ct-c', item.acted ? 'ct-d' : '' ]">{{ item.tmp }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const acted = ref(false)

const icoList = ref([
  { tmp: '-10', cls: 'xuehua', acted: false },
  { tmp: '-7', cls: 'xuehua', acted: false },
  { tmp: '-5', cls: 'xuehua', acted: false },
  { tmp: '-3', cls: 'xuehua', acted: false },
  { tmp: '-1', cls: 'xuehua', acted: false },
  { tmp: '0', cls: 'xuehua', acted: true },
  { tmp: '1', cls: 'daochu1024-07', acted: false },
  { tmp: '3', cls: 'daochu1024-07', acted: false },
  { tmp: '5', cls: 'daochu1024-07', acted: false },
  { tmp: '6', cls: 'daochu1024-07', acted: false },
  { tmp: '10', cls: 'daochu1024-07', acted: false }
])

const chgtmp = (index) => {
  icoList.value.forEach(item => {
    item.acted = false
  })
  icoList.value[index].acted = true
}
</script>

<style scoped>
.ct-a {width: 100%; display: flex; display: -webkit-flex; justify-content: space-between;}
.ct-b0 {color: #001bfe;}
.ct-b1 {color: #0080ff;}
.ct-b2 {color: #01b3fd;}
.ct-b3 {color: #01cdff;}
.ct-b4 {color: #02feff;}
.ct-b5 {color: #FFF;}
.ct-b6 {color: #ffe502;}
.ct-b7 {color: #feb300;}
.ct-b8 {color: #ff7f00;}
.ct-b9 {color: #ff6801;}
.ct-b10 {color: #ff3401;}
.ct-c {text-align: center;}
.ct-d {color: #ff6801;}
</style>